<template>
    <div class="container">
        <div class="my_history">
            <div class="my_history_title">
                <strong>| </strong>
                <p>历史记录</p>
            </div>
            <div class="content">

                <el-row>
                    <el-col :span="24">
                        <div class="operate_button">
                            <router-link :to="{name:'DataAnalysis', params:{id: this.userId}}">
                                <el-button
                                        type="primary"
                                        style="margin-right: 10px"
                                >
                                    数据分析
                                </el-button>
                            </router-link>
                            <el-button
                                    type="danger"
                                    style="margin-right: 10px"
                                    @click="deleteRecordBatch">
                                删除
                            </el-button>
                            <el-button
                                    type="success"
                                    @click="exportReoprt">
                                导出
                            </el-button>
                        </div>
                    </el-col>
                </el-row>

                <el-table
                        :data="history"
                        style="width: 70%"
                        :header-cell-style="headClass"
                        :cell-style="rowClass"
                        @selection-change="handleSelectionChange"
                        class="my-table">
                    <el-table-column type="selection" width="55"/>
                    <el-table-column label="图片" prop="pretreatedImgList">
                        <template #default="scope">
                            <el-image
                                    style="width: 100px; height: 100px;margin-right: 10px"
                                    :src="this.getOSSAddress + scope.row.handwritingImg"
                                    :preview-src-list="[this.getOSSAddress + scope.row.handwritingImg,this.getOSSAddress + scope.row.pretreatmentImg]"
                            >
                            </el-image>
                            <el-image
                                    style="margin-left:10px;width: 100px; height: 100px;margin-right: 10px"
                                    :src="this.getOSSAddress + scope.row.pretreatmentImg"
                                    :preview-src-list="[this.getOSSAddress + scope.row.pretreatmentImg,this.getOSSAddress + scope.row.handwritingImg]"
                            >
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="日期" prop="analyzeTime">
                        <template #default="scope">
                            {{calcDate(scope.row.writingTime)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="right">
                        <template #header>
                            操作
                        </template>
                        <template #default="scope">
                            <el-button
                                    @click="wordDetail(scope.row.reportLink)"
                                    type="text"
                                    icon="el-icon-view"
                            >
                                查看分析报告
                            </el-button>
                            <el-button
                                    icon="el-icon-download"
                                    type="text"
                                    @click="download(scope.row.reportLink)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <!-- 分页  -->
                <el-pagination
                        :current-page="currentPage"
                        :page-size="pageSize"
                        :total="total"
                        style="padding: 30px 0; text-align: center;"
                        layout="total, prev, pager, next, jumper"
                        @current-change="getUserHistory"
                />

            </div>
        </div>

    </div>
</template>

<script>
    import api from '@/api'
    import user from '@/api/user/user'
    import customer from "@/api/customer/customer";
    export default {
        name: "userHistory",
        data() {
            return {
                userId: null,
                status: 0,
                currentPage: 1,
                pageSize: 8,
                total: 0,
                history: null,
                // 选中记录信息
                multipleSelection: [],
                // 选中记录编号
                recordIdSelected: [],
            }
        },
        created() {
            this.userId = JSON.parse(localStorage.getItem("SESSION_KEY_USER")).id
            this.getUserHistory();
        },
        methods: {
            getUserHistory() {
                let reporyQuery = {status: this.status, id: this.userId};
                user.getUserHistory(this.currentPage, this.pageSize, reporyQuery)
                    .then((response) => {
                        let res = response.data.item;
                        this.currentPage = res.currentPage;
                        this.pageSize = res.pageSize;
                        this.total = res.total;
                        this.history = res.records;
                    }).catch(error => {
                    this.$message.error(error);
                })
            },
            getArray() {
                let array = [];
                for (let i = 0; i < this.recordIdSelected.length; i++) {
                    let id = {};
                    id.id = this.recordIdSelected[i];
                    array[i] = id;
                }
                return array;
            },
            deleteRecordBatch() {
                this.$confirm('此操作将删除记录,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    let array = this.getArray();
                    customer.deleteRecordBatch({array}).then(response => {
                        this.getUserHistory()
                        this.$message.success("删除成功")
                    }).catch((response) => {
                        this.$message.error(response)
                    })

                }).catch(() => {
                    this.$message.info("已取消删除")
                })
            },
            exportReoprt() {
                //下 载
                let array = this.getArray();
                api.downReport(array).then(res => {
                    const content = res
                    const blob = new Blob([content], {type: "application/zip"})
                    const fileName = '性格报告'
                    if ('download' in document.createElement('a')) { // 非IE下载
                        const elink = document.createElement('a')
                        elink.download = fileName
                        elink.style.display = 'none'
                        elink.href = URL.createObjectURL(blob)
                        document.body.appendChild(elink)
                        elink.click()
                        URL.revokeObjectURL(elink.href) // 释放URL 对象
                        document.body.removeChild(elink)
                    } else { // IE10+下载
                        navigator.msSaveBlob(blob, fileName)
                    }
                    this.$message.success("下载成功");
                }).catch(() => {
                    this.$message.error("下载失败");
                });
            },
            wordDetail(url) {
                window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url)
            },
            download(val) {
                window.open(this.getOSSAddress + val, '_blank')
            },
            // 计算日期
            calcDate(timeStr) {
                return timeStr.substring(0, 16);
            },
            // 表头居中显示
            headClass() {
                return "text-align:center"
            },
            rowClass() {
                return "text-align:center"
            },
            goBack() {
                this.$router.back();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val

                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.recordIdSelected[i] = this.multipleSelection[i].characterReportId
                }
            },
        },
        computed: {
            getOSSAddress() {
                return "https://bluedot-a.oss-cn-hangzhou.aliyuncs.com/";
            }
        }
    }
</script>

<style scoped>
    .my_history_title {
        margin-left: 150px;
    }

    .my_history > div > strong {
        font-size: 40px;
        color: #01A7F0;
    }

    .my_history_title > p {
        display: inline-block;
        font-size: 25px;
        vertical-align: 1px;
        color: #01A7F0;
    }

    .operate_button {
        margin-left: 850px;
    }

    .content {
        border-style: outset;
    }

    .my-table {
        margin-left: 250px;
    }

</style>